<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body, #parent {height: 100%;overflow: hidden;}
        #parent > div {
            border: 1px solid #000;
        }
        #top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
        }
        #left {
            position: absolute;
            top: 100px;  /*值大于等于#top的高度*/
            left: 0;
            bottom: 50px;  /*值大于等于#bottom的高度*/
            width: 200px;
        }
        #right {
            position: absolute;
            overflow: auto;
            left: 200px;  /*值大于等于#left的宽度*/
            right: 0;
            top: 100px;  /*值大于等于#top的高度*/
            bottom: 50px;  /*值大于等于#bottom的高度*/
        }
        #bottom {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 50px;
        }

  /*      作者：sweet_KK
        链接：https://juejin.im/post/5aa252ac518825558001d5de
                                   来源：掘金
                                   著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。*/
    </style>
</head>
<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left

    <div style="background: blue; height: 1200px">

    </div>

    </div>
    <div id="right">right



    </div>
    <div id="bottom">bottom</div>
</div>

</body>
</html>